import i18nItem_less from './index.module.less'
import { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import { useAppDispatch, useAppSelector } from '@/hooks/stroe'
import { getItem } from '@/utils/auth'
import { i18nConfig, i18n_config } from '@/store/modules/config'
export default function I18nItem() {
  const { i18n } = useTranslation()
  const con_i18n = useAppSelector(i18n_config)
  const dispatch = useAppDispatch()
  // 切换中英文
  const changeLanguage = useCallback(
    (val: string) => {
      if (getItem('lang') !== val) {
        dispatch(i18nConfig(val))
        const locale = getItem('lang')
        i18n.changeLanguage(locale)
      }
    },
    [con_i18n]
  )

  return (
    <>
      <span
        onClick={() => changeLanguage('zh')}
        className={
          getItem('lang') === 'zh' || !getItem('lang')
            ? i18nItem_less.islanguageWeight
            : i18nItem_less.islanguageNomal
        }
      >
        中
      </span>
      /
      <span
        className={
          getItem('lang') === 'en' ? i18nItem_less.islanguageWeight : i18nItem_less.islanguageNomal
        }
        onClick={() => changeLanguage('en')}
      >
        英
      </span>
    </>
  )
}
